<template>
  <div class="auto-screen-container">
    <div
      class="inner-screen-container"
      ref="inner_screen_container"
      :style="{ width: width + 'px', height: height + 'px' }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted ,onBeforeUnmount ,nextTick} from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  width: {
    type: Number,
    default: 3840,
  },
  height: {
    type: Number,
    default: 2160,
  },
});
const route = useRoute();
const router = useRouter();
const inner_screen_container = ref(null);
const resetScreen = () => {
  const width = props.width;
  const height = props.height;
  nextTick(() => {
    const scale = document.documentElement.clientWidth / width;
    inner_screen_container.value.style.transform = `scale(${scale})`;
  });
};
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  setTimeout(() => {
    resetScreen();
  });
  window.onresize = () => resetScreen();
});
onBeforeUnmount(() => {
  window.onresize = null;
});
</script>
<style scoped lang="scss">
.auto-screen-container {
  width: 100%;
  height: 100%;
  .inner-screen-container {
    display: inline-block;
    transform-origin: 0 0;
    position: absolute;
    // left: 50%;
    overflow: hidden;
  }
}
</style>
